<script setup>
import { ref, reactive } from 'vue'
import { showFailToast, showSuccessToast } from 'vant';
import { useRouter } from 'vue-router';
import { register, registerCode } from '@/api/login';
const router = useRouter()
const nickName = ref('')
const tel = ref('')
const rePassword = ref('')
const sms = ref('')
const password = ref('')
const code = ref('发送验证码')
// 逻辑代码
const getRegisterCode = () => {
    registerCode({
        phone: tel.value,
        type: "register",
    }).then(res => {
        code.value = res.data
    })
}
const onSubmit = () => {
    if (rePassword.value != password.value) {
        showFailToast("两次密码不一致")
        return
    }
    register({
        account: tel.value,
        nickName: nickName.value,
        captcha: sms.value,
        password: rePassword.value
    }).then(res => {
        if (res.status == 200) {
            showSuccessToast("注册成功")
            router.push("/login")
        }
    })
}
</script>

<template>
    <div class="wrapper">
        <div class="left-top-sign">
            REGISTER
        </div>
        <div class="welcome">
            注册
        </div>
    </div>
    <div class="input-content">
        <van-form @submit="onSubmit">
            <van-field v-model="tel" name="tel" label="手机号" placeholder="手机号"
                :rules="[{ required: true, message: '请填写手机号' }]" />
            <van-field v-model="sms" center clearable label="短信验证码">
                <template #button>
                    <div class="btn" @click="getRegisterCode">
                        {{ code }}
                    </div>
                </template>
            </van-field>
            <van-field v-model="nickName" name="nickName" label="昵称" placeholder="昵称"
                :rules="[{ required: true, message: '请填写昵称' }]" />

            <van-field v-model="password" name="password" label="密码" placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]" />
            <van-field v-model="rePassword" name="rePassword" label="确认密码" placeholder="确认密码"
                :rules="[{ required: true, message: '请填写确认密码' }]" />
            <div style="margin: 16px;">
                <van-button round block type="danger" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>

</template>

<style lang="scss" scoped>
@use "@/assets/uni.scss" as *;

.container {
    width: 100%;
    padding-top: 50px;
    position: absolute;
    height: 92.5%;
    overflow: hidden;
    background: #fff;

}

.wrapper {
    position: relative;
    z-index: 90;
    background: #fff;
    padding-bottom: 20px;
}

.btn {
    background-color: #5695f9;
    color: #fff;
    padding: 3px;
    border-radius: 2px;

}

.left-top-sign {
    font-size: 60px;
    color: #f8f8f8;
    position: relative;
    left: -8px;
}

.welcome {
    position: relative;
    left: 25px;
    top: -45px;
    font-size: 23px;
    color: #555;
}

.input-content {
    padding: 0 30px;
}

.input-item {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    padding: 0 15px;
    background: #f8f6fc;
    height: 60px;
    border-radius: 4px;
    margin-bottom: 25px;

    &:last-child {
        margin-bottom: 0%;
    }
}

.tit {
    height: 25px;
    line-height: 28px;
    font-size: 13px;
    color: #606266;
}

input {
    height: 30px;
    font-size: 15px;
    color: #303133;
    width: 100%;
}

.confirm-btn {
    width: 315px;
    height: 38px;
    line-height: 38px;
    border-radius: 50px;
    margin-top: 35px;
    background: #fa436a;
    color: #fff;
    font-size: 16px;
    margin-left: 7%;

    &:after {
        border-radius: 100px;
    }
}

.forget-section {
    font-size: 13px;
    color: #4399fc;
    text-align: center;
    margin-top: 20px;
}
</style>